<template>
  <div class="container">
      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px" >
        <x-header class="my-header" >服务详情</x-header>
        <div class="service_item">
          <flexbox orient="vertical">
            <flexbox-item><div class="flex-demo">
              <div class="content">
                <p>【实用人群】</p>
                <p>{{content[1]}}</p>
              </div>
            </div></flexbox-item>
            <flexbox-item><div class="flex-demo">
              <div class="content">
                <p>【服务内容】</p>
                <p>{{content[2]}}</p>
              </div>
            </div></flexbox-item>
            <flexbox-item><div class="flex-demo">
              <div class="content">
                <p>【服务品质保证】</p>
                <p>1、所有护士都经国家卫计委考核并拥有《护士执业证书》。<br/>
                  2、3年以上工作经验。<br/>
                  3、擅长各科专业专科护理操作的护士。<br/>
                  4、标准化的服务流程。<br/>
                  5、严格的护理质量考核标准。<br/>
                  6、特聘专家团队层层研究及把控服务品质。</p>
              </div>
            </div></flexbox-item>
            <flexbox-item><div class="flex-demo">
              <div class="content">
                <p>【备注说明】</p>
                <p>1、护士上门不提供药品及生理盐水，客户需提供注射的药品、医生开具的注射单、发票等相关证明。为您的自身健康及安全考虑，护士上门注射需核对注射单等相关信息，遵医嘱执行注射，如无相关证明，护士不提供注射服务而导致的取消订单不予退款，请知悉。<br/>
                  2、以上收费标准为护士上门的基本服务费以及所需耗材费用。（如：无菌注射器、无菌棉签、消毒液）注：此次订单默认为注射同一人和一种药物的服务费，同一人可赠予多注射一类药物服务，无需加收费用，一般不建议一次注射三种及以上药物。<br/>
                  3、为了您的自身健康考虑，抗生素、玻尿酸及血管活性药物等不予上门注射，请到医院完善服务需求。有对该药物过敏者、有严重出、凝血倾向，血小板明显减少等包括但不限于上诉禁忌症，均不能提供服务。<br/>
                  4、选择上门打针服务的客户，平台默认您已充分知悉上门打针的风险并承担相应的责任，上门打针前需与提供服务的机构签订知情服务同意书。<br/>
                  5、护士接单成功，客户则不能取消预约，如未产生服务，取消，将收取当次预约项30%的信息服务费。每次预约需提前两小时，如取消或改变预约时间及地点，需提前两小时告知。如护士在约定时间内以到达约定地点，则不可修改，如修改，将收取当次预约服务项目30%的信息服务费，如取消将收取当次预约服务项目70%的信息服务费。<br/>
                  6、套餐有效期暂定为一年。如购买后在有效期内未使用完、需要申请退款的客户，请致电客服；（退款金额=套餐总额-服务项目单价*使用次数）退款时间均在7个工作日内完成。</p>
              </div>
            </div></flexbox-item>
          </flexbox>
        </div>
        <tabbar slot="bottom" id="tabbar" style="background-color: rgb(106, 222, 208);">
          <tabbar-item @click.native="getOrder()">
            <span slot="label" style="color: white;font-weight: 400;font-size: 0.9rem">下一步</span>
          </tabbar-item>
        </tabbar>
      </view-box>
  </div>
</template>

<script>
  import { ViewBox,XHeader,Flexbox, FlexboxItem, Divider,Tabbar, TabbarItem, Group, Cell  } from 'vux'

  export default {
    data(){
      return{
        showMenu: false,
        normalSid:'',
        highSid:'',
        icon:'',
        content:[]
      }
    },
    mounted(){
      this.normalSid=this.$route.query.normalSid;
      this.highSid=this.$route.query.highSid;
      this.icon=this.$route.query.icon;
      this.initdata(this.normalSid)
    },
    methods:{
      initdata(sid){
        let self=this
        let data={}
        this.Ajax('get','/Mall/Service/detail/sid/'+sid,data,(data)=>{
          let content=[]    //获取该服务详情中的内容
          content=data.data.detail_description.split('【')
          content.forEach((item)=>{
            let string=item.split('】');
            item=string[1]
            self.content.push(item)
          })
        })
      },
      getOrder(){
        this.$router.push({
          path:'/order_details/ordering',
          query:this.$route.query
        })
      }
    },
    components: {
      ViewBox,
      XHeader,
      Flexbox,
      FlexboxItem,
      Divider,
      Tabbar,
      TabbarItem,
      Group,
      Cell
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .flex-demo{
    min-height: 70px;
    background-color: white;
  }
  .content{
    padding: 1px 10px 1px 10px;
  }
  .content p{
    margin: 15px 0 15px 0;
  }
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  #tabbar{
    position: fixed;
  }
</style>
